<template>
    <div>
      <div class="ls_maincont"></div>
      <div class="mainDiv yj">
        <div class="r">
          <div class="stage_c_r main_3 yj_c">
            <div class="t">
              <div class="react">
                <i class="l_up"></i>
                <i class="l_down"></i>
                <i class="r_up"></i>
                <i class="r_down"></i>
                <div class="title">
                  <span>锅炉运行智能预警</span>
                </div>
              </div>
            </div>
            <div class="d d2">
              <!-- 燃烧温度 -->
              <div class="yj_item">
                <h1>燃烧温度</h1>
                <p>
                  <span class="wendu">A1</span>
                  <!-- <span style="color: green;" v-if="textColorWenDu[index] === '0'">A1</span>
                  <span style="color: yellow;" v-if="textColorWenDu[index] === '1'">A1</span>
                  <span style="color: red;" v-if="textColorWenDu[index] === '2'">A1</span> -->
                  <span class="wendu">A2</span>
                  <span class="wendu">A3</span>
                  <span class="wendu">A4</span>
                </p>
                <p>
                  <span class="wendu">B1</span>
                  <span class="wendu">B2</span>
                  <span class="wendu">B3</span>
                  <span class="wendu">B4</span>
                </p>
                <p>
                  <span class="wendu">C1</span>
                  <span class="wendu">C2</span>
                  <span class="wendu">C3</span>
                  <span class="wendu">C4</span>
                </p>
                <p>
                  <span class="wendu">D1</span>
                  <span class="wendu">D2</span>
                  <span class="wendu">D3</span>
                  <span class="wendu">D4</span>
                </p>
              </div>
              <!-- 燃烧状态 -->
              <div class="yj_item">
                <h1>燃烧状态</h1>
                <p>
                  <span class="ranshao">A1</span>
                  <span class="ranshao">A2</span>
                  <span class="ranshao">A3</span>
                  <span class="ranshao">A4</span>
                </p>
                <p>
                  <span class="ranshao">B1</span>
                  <span class="ranshao">B2</span>
                  <span class="ranshao">B3</span>
                  <span class="ranshao">B4</span>
                </p>
                <p>
                  <span class="ranshao">C1</span>
                  <span class="ranshao">C2</span>
                  <span class="ranshao">C3</span>
                  <span class="ranshao">C4</span>
                </p>
                <p>
                  <span class="ranshao">D1</span>
                  <span class="ranshao">D2</span>
                  <span class="ranshao">D3</span>
                  <span class="ranshao">D4</span>
                </p>
              </div>
              <!--着火距离  -->
              <div class="yj_item">
                <h1>着火距离</h1>
                <p>
                  <span class="zhaohuo">A1</span>
                  <span class="zhaohuo">A2</span>
                  <span class="zhaohuo">A3</span>
                  <span class="zhaohuo">A4</span>
                </p>
                <p>
                  <span class="zhaohuo">B1</span>
                  <span class="zhaohuo">B2</span>
                  <span class="zhaohuo">B3</span>
                  <span class="zhaohuo">B4</span>
                </p>
                <p>
                  <span class="zhaohuo">C1</span>
                  <span class="zhaohuo">C2</span>
                  <span class="zhaohuo">C3</span>
                  <span class="zhaohuo">C3</span>
                </p>
                <p>
                  <span class="zhaohuo">D1</span>
                  <span class="zhaohuo">D2</span>
                  <span class="zhaohuo">D3</span>
                  <span class="zhaohuo">D4</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="stage_t">
        <a href="#"></a>
        <h1  >1号锅炉燃烧数字化与低负荷稳燃监测管理系统</h1>
        <div>
          <span></span>
          <span id="todayTimer">{{ nowTime }}</span>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref } from "vue";
  import { formatTime } from "../utils/date.js";
  import { postyujingapi } from "../api/yujing";
  const nowTime = ref("");
  onMounted(() => {
    setInterval(() => {
      nowTime.value = formatTime(new Date());
    });
    // /////////////////
    obj();
  });
  // 燃烧数字化检测
  let dcsBurning = ref({});
  // 温度
  let wendu = ref([]);
  // 着火距离
  let zhaohu = ref([]);
  // 燃烧稳定性检测
  let ranshao = ref([]);
  // 根据接口返回来的字段判断他的颜色----
  let myElement = ref([]);
  // 接口返回温度字体颜色字段
  let textColorWenDu = ref([]);
  // 接口返回着火距离字体颜色字段
  let textColorZHaoHuo = ref([]);
  // 接口返回燃烧稳定性字体颜色字段
  let textColorRanShao = ref([]);
  let timer=0
  let obj = async () => {
    clearTimeout(timer)
    let res = await postyujingapi();
    console.log(res.data);
    dcsBurning.value = res.data;
    dcsBurning.value.map((item) => {
      wendu.value.push(item.temperature.toFixed(0));
      zhaohu.value.push(item.distance.toFixed(0));
      ranshao.value.push(item.stability.toFixed(0));
      // 颜色判断字段
      myElement.value.push(item.warning.split(","));
    });
    //颜色的判断
    myElement.value.map((item) => {
      textColorWenDu.value.push(item[0]);
      textColorZHaoHuo.value.push(item[1]);
      textColorRanShao.value.push(item[2]);
      console.log(textColorWenDu.value);
    });
    let wendudiv = document.getElementsByClassName("wendu");
    for (var i = 0; i < wendudiv.length; i++) {
      if (textColorWenDu.value[i] == "0") {
        wendudiv[i].style.color = "green";
      } else if (textColorWenDu.value[i] == "1") {
        wendudiv[i].style.color = "yellow";
      } else if (textColorWenDu.value[i] == "2") {
        wendudiv[i].style.color = "red";
      }
    }
    let ranshaodiv = document.getElementsByClassName("ranshao");
    for (var i = 0; i < ranshaodiv.length; i++) {
      if (textColorRanShao.value[i] == "0") {
        ranshaodiv[i].style.color = "green";
      } else if (textColorRanShao.value[i] == "1") {
        ranshaodiv[i].style.color = "yellow";
      } else if (textColorRanShao.value[i] == "2") {
        ranshaodiv[i].style.color = "red";
      }
    }
    //   textColorZHaoHuo
    let ZHaoHuodiv = document.getElementsByClassName("zhaohuo");
    for (var i = 0; i < ZHaoHuodiv.length; i++) {
      if (textColorZHaoHuo.value[i] == "0") {
        ZHaoHuodiv[i].style.color = "green";
      } else if (textColorZHaoHuo.value[i] == "1") {
        ZHaoHuodiv[i].style.color = "yellow";
      } else if (textColorZHaoHuo.value[i] == "2") {
        ZHaoHuodiv[i].style.color = "red";
      }
    }
    timer = setTimeout(() => {
    obj();
  }, 500)
  };
  
  </script>
  
  <style lang="scss" scoped></style>
  